<template>
  <div class="feedback-list-container">
    <div class="app-container">
      <el-card class="box-card">

        <!-- 页头 -->
        <div
          slot="header"
          class="clearfix"
        >
          <span>意见反馈列表</span>
          <div class="form">
            <el-form
              :inline="true"
              :model="queryForm"
              ref='queryForm'
              :rules='queryRules'
              class="demo-form-inline"
            >
              <el-form-item prop='title'>
                <el-input
                  v-model.trim="queryForm.title"
                  placeholder="请输入标题关键字"
                  clearable
                  @keyup.enter.native="getQueryFn()"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="getQueryFn()"
                >查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 筛选 -->
        <div class="screen">
          <el-form
            :rules="screenRules"
            inline
            :model="query"
            ref="screenForm"
          >
            <el-form-item
              label="反馈人类型"
              prop="type"
            >
              <el-select
                filterable
                clearable
                v-model="query.type"
                placeholder="请选择权限"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="screenSubmitFn()"
              >提交</el-button>
              <el-button @click="screenResetFn()">重置</el-button>
            </el-form-item>
          </el-form>

        </div>

        <!-- 表格组件 -->
        <div
          class="table"
          style="height:80%"
        >
          <el-table
            :data="feedbackList"
            style="width: 100%"
            @row-click="rowClickFn"
          >
            <el-table-column
              type="index"
              label="序号"
              min-width="50px"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="反馈人姓名"
              min-width='100px'
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="反馈人类型"
              min-width='100px'
            >
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              min-width='200px'
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="反馈时间"
              min-width='180px'
            >
              <template v-slot={row}>
                {{new Date(row.time).toLocaleString()}}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px; margin-top: 40px;"
          v-if="total > query.pagesize"
        >
          <!-- 分页区域 -->
          <el-pagination
            :current-page="query.page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            hide-on-single-page
          />
        </el-row>

        <el-dialog
          title="意见反馈信息"
          :visible.sync="dialogVisible"
          @close="dialogCloseFn()"
          :show-close='false'
          custom-class='dialogFeedback'
        >
          <el-descriptions
            border
            :column='3'
            labelClassName="width-50"
          >
            <el-descriptions-item
              label="反馈id"
              span="3"
            >{{feedbackInfo.id}}</el-descriptions-item>
            <el-descriptions-item
              label="反馈人学号/工号"
              span="3"
            >{{feedbackInfo.f_number}}</el-descriptions-item>

            <el-descriptions-item label="反馈人姓名">{{feedbackInfo.name}}</el-descriptions-item>
            <el-descriptions-item label="反馈人类型">{{feedbackInfo.type}}</el-descriptions-item>
            <el-descriptions-item label="反馈时间">{{new Date(feedbackInfo.time).toLocaleString()}}</el-descriptions-item>
            <el-descriptions-item
              label="标题"
              span="3"
            >{{feedbackInfo.title}}
            </el-descriptions-item>
            <el-descriptions-item
              label="内容"
              span="3"
            >{{feedbackInfo.content}}
            </el-descriptions-item>
          </el-descriptions>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getFeedbackListAPI, queryFeedbackAPI } from '@/api'
export default {
  name: 'feedbackList',
  data () {
    return {
      query: {
        page: 1, // 页码
        pagesize: 10, // 每页条数
        type: ''
      },
      feedbackList: [],
      total: 0,
      queryForm: {
        title: ''
      },
      queryRules: {
        title: [
          {
            min: 1,
            max: 50,
            type: 'string',
            message: '标题要求1-50个字符',
            trigger: 'change'
          }
        ]
      },
      dialogVisible: false,
      feedbackInfo: {},
      screenRules: {
        type: [
          {
            min: 2,
            max: 4,
            type: 'string',
            message: '类型要求2个字符',
            trigger: 'blur'
          }
        ]
      },
      typeOptions: [
        {
          value: '学生'
        },
        {
          value: '维修人员'
        }
      ],
      timer: null
    }
  },
  created () {
    this.getFeedbackListFn()
  },
  methods: {
    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.size = newSize
      this.getFeedbackListFn() // 获取通知公告列表
    },
    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getFeedbackListFn() // 获取通知公告列表
    },
    // 获取通知公告列表 -> 发送请求
    async getFeedbackListFn () {
      clearTimeout(this.timer)
      this.timer = setInterval(this.getFeedbackListFn, 1000 * 60)
      try {
        const { success, code, data } = await getFeedbackListAPI(this.query)
        if (success && code === 10000) {
          this.feedbackList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 根据输入title模糊查询
    async getQueryFn () {
      try {
        const { success, code, data } = await queryFeedbackAPI({
          ...this.queryForm,
          ...this.query
        })
        if (success && code === 10000) {
          this.feedbackList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 点击表格某一行 -> 展示数据详情
    rowClickFn (row) {
      this.feedbackInfo = row
      this.dialogVisible = true
    },
    // dialog 关闭
    dialogCloseFn () {
      this.feedbackInfo = this.$options.data().feedbackInfo
      this.$refs.feedbackInfo?.resetFields()
    },
    // 点击筛选按钮 -> 重新获取列表
    screenSubmitFn () {
      this.$refs.screenForm.validate(async (valid) => {
        valid && this.getFeedbackListFn()
      })
    },
    // 清空筛选数据 -> 重新获取列表
    screenResetFn () {
      this.query = this.$options.data().query
      this.$refs.screenForm?.resetFields()
      this.getFeedbackListFn()
    }
  },
  // 销毁实例
  beforeDestroy () {
    clearTimeout(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less" scoped>
.clearfix {
  display: flex;
}
.form {
  text-align: right;
  flex-grow: 1;
}
.title {
  flex-grow: 0;
}
</style>
